<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout/common :: headBar(~{::title}, ~{::link})">
    <title>发帖</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/custom.css}">
</head>
<body>
<script th:replace="layout/common :: #layuiJS"></script>

<!-- 引入头部标题栏 -->
<div th:replace="layout/common :: topBar(myTarget='_blank')"></div>

<!--分割线-->
<hr class="layui-bg-green">

<div class="posting-form">
    <form class="layui-form layui-form-pane" action="" th:action="@{/posting}" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">帖子标题</label>
            <div class="layui-input-block">
                <input type="text" name="postingTitle" required lay-verify="required" placeholder="请输入标题"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">帖子类别</label>
            <div class="layui-input-block">
                <select name="postingTypeIndex" lay-verify="required">
                    <option th:value="${postingType.getIndex()}" th:text="${postingType.getName()}"
                            th:each="postingType : ${postingTypes}"></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否公开</label>
            <div class="layui-input-block">
                <!-- 选中即传值，表示公开 -->
                <input type="checkbox" name="isPublic" th:value="1" checked="checked" lay-skin="switch">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">主要内容</label>
            <div class="layui-input-block">
            <textarea id="postingDetail" style="display: none;" name="postingDetail" placeholder="请输入内容"
                      class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="postingForm">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <form action="/logout" th:action="@{/logout}" method="post">
        <button type="submit">退出</button>
    </form>
</div>

<script>
    layui.use(['layedit', 'form', 'jquery'], function () {
        var layedit = layui.layedit;
        var form = layui.form;
        var $ = layui.$;

        // 建立富文本编辑器
        // index：即该方法返回的索引
        var index = layedit.build('postingDetail', {
            tool: [
                'strong' //加粗
                , 'italic' //斜体
                , 'underline' //下划线
                , 'del' //删除线

                , '|' //分割线

                , 'left' //左对齐
                , 'center' //居中对齐
                , 'right' //右对齐
                , 'link' //超链接
                , 'unlink' //清除链接
                , 'face' //表情
                , 'image' //插入图片
                //, 'help' //帮助
            ],
            uploadImage: {
                url: '/file/upload' //接口url
                ,type: 'post' //默认post
            }
        });

        form.on('submit(postingForm)', function (data) {
            console.log(data.field);

            var postingDetail = layedit.getContent(index);
            data.field.postingDetail = postingDetail;

            $.post('/posting', data.field, function (response) {
                if (response.code === 200) {
                    layer.open({
                       anim: 1,
                       title: '发帖成功',
                       content: response.msg,
                       btn: ['去查看'],
                       yes: function (index, layero) {
                           layer.close(index);
                           window.location.href = '/posting/' + response.data.id;
                       }
                    });
                } else {
                    layer.open({
                        anim: 1,
                        title: '发帖失败',
                        content: response.msg,
                        btn: ['确认'],
                        yes: function (index, layero) {
                            layer.close(index);
                        }
                    });
                }
            });

            return false;
        });
    });
</script>
</body>
</html>